<template>
  <view class="tab-bar">
    <view class="content">
      <view
        class="one-tab"
        v-for="(item, index) in tabBarList"
        :key="index"
        @click="selectTabBar(item.pagePath)"
      >
        <view>
          <view class="tab-img">
            <image
              v-if="routePath === item.pagePath"
              class="img"
              :src="item.selectedIconPath"
            ></image>
            <image v-else class="img" :src="item.iconPath"></image>
          </view>
        </view>
        <view class="tit">{{ item.text }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { cargoownertabbar, drivertabbar, carriertabbar } from 'common/tabbar.js'
export default {
  name: 'C_tabbar',
  props: {
    // 当前页面路径
    routePath: {
      type: String,
      required: true,
    },
  },
  data() {
    return {
      tabBarList: [],
    }
  },
  methods: {
    selectTabBar(path) {
      console.log(path)
      let routes = getCurrentPages() // 获取当前打开过的页面路由数组
      let curRoute = routes[routes.length - 1].route
      if (path != curRoute) {
        uni.reLaunch({
          url: '/' + path,
        })
      }
    },
  },
  watch: {
    //观察option的变化
    '$store.state.identity': {
      handler(newVal, oldVal) {
        if (newVal) {
          if (newVal == '4') {
            this.tabBarList = cargoownertabbar
          } else if (newVal == '3') {
            this.tabBarList = drivertabbar
          } else if (newVal == '2') {
            this.tabBarList = carriertabbar
          } else {
          }
        } else {
          this.tabBarList = drivertabbar
        }
      },
      immediate: true,
    },
  },
}
</script>

<style lang="scss">
.tab-bar {
  position: fixed;
  bottom: 0.1rpx;
  left: 0;
  right: 0;
  width: 100vw;
  padding: 12rpx 20rpx;
  padding-bottom: calc(10rpx + constant(safe-area-inset-bottom));
  padding-bottom: calc(10rpx + env(safe-area-inset-bottom));
  background: #fff;
  border-top: 1rpx solid #00000054;
  z-index: 1;

  .content {
    display: flex;
    .one-tab {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 50%;
      background: #fff;
      .tab-img {
        width: 50rpx;
        height: 50rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

      .tit {
        font-size: 36rpx;
        transform: scale(0.7);
      }
    }
  }
}
</style>
